<template>
  <div class="editable-textarea" @click="fouceTextarea">
    <draggable :list="list" @end="adjustTextareaHeight()" >
      <div
        class="editable-content"
        v-for="(user, index) in list"
        :key="index"
        :options="{handle: '.handle', animation: 1200}"
        >
        <template v-if="isEditable(user)">
          <textarea ref="textarea" :value="getContent(user)" @input="updateContent(user,$event.target.value)" rows="1" :spellcheck="false"></textarea>
        </template>
        <template v-else>
          <div
            ref="editableContent"
            class="not-editable"
            :style="'background-color: #9c9ea5;color:white;display: inline;font-size: 16px;user-select: none;'">
            {{getContent(user)}}
            <div class="nickname" style="display: inline;font-size:10px;background-color: #9c9ea5;color:white;">({{ user.nickName }})</div>
          </div>
        </template>
      </div>
    </draggable>
  </div>

</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable,
  },
  name: "DragTextarea",
  props: {
    /* 编辑器的内容 */
    list: {
      type: Array,
      default: [],
    },
    type: {
      type: String,
      default: "lc",
    },
  },
  data(){
  	return {
  	}
  },
  watch:{
    list(val){
      this.$nextTick(() => {
           this.adjustTextareaHeight();
      });
    }
  },
  mounted(){
    if(this.list){
      this.$nextTick(() => {
           this.adjustTextareaHeight();
      });
    }
  },
  methods: {
    getContent(item){
      let content;
      switch(this.type){
        case "lc":
          content = item.lc;
          break;
        case "fz":
          content = item.fz;
          break;
        case "lj":
          content = item.lj;
          break;
        case "qg":
          content = item.qg;
          break;
        case "ss":
          content = item.ss;
          break;
        case "jj":
          content = item.jj;
          break;
        case "na":
          content = item.na;
          break;
        case "ha":
          content = item.ha;
          break;
        case "ax":
          content = item.ax;
          break;
        case "yc":
          content = item.yc;
          break;
        case "dh":
          content = item.dh;
          break;
        case "kf":
          content = item.kf;
          break;
        case "ts":
          content = item.ts;
          break;
      }
      return content;
    },
    isEditable(user) {
      return user.userId.toString() === this.$store.getters.userId;
    },
    updateContent(user, dom) {
     let content = dom;
      //dom.innerText = "";
      switch(this.type){
        case "lc":
          user.lc = content;
          break;
        case "fz":
          user.fz = content;
          break;
        case "lj":
          user.lj = content;
          break;
        case "qg":
          user.qg = content;
          break;
        case "ss":
          user.ss = content;
          break;
        case "jj":
          user.jj = content;
          break;
        case "na":
          user.na = content;
          break;
        case "ha":
          user.ha = content;
          break;
        case "ax":
          user.ax = content;
          break;
        case "yc":
          user.yc = content;
          break;
        case "dh":
          user.dh = content;
          break;
        case "kf":
          user.kf = content;
          break;
        case "ts":
          user.ts = content;
          break;
      }
      this.$nextTick(() => {
      		  this.adjustTextareaHeight()
      })
    },
    adjustTextareaHeight() {
      const textarea = this.$refs.textarea[0]
       if (textarea) { // 在访问 $refs 前先判断是否存在
    	  textarea.style.height = 'auto'
    	  textarea.style.height = `${textarea.scrollHeight}px`
    	}
    },
    fouceTextarea(){
      const textarea = this.$refs.textarea[0]
      if (textarea) {
        textarea.focus();
      }
    }
  },
};
</script>

<style>
  textarea {
    font-size: 16px;
    width: 100%;
    border:none;
    outline: none;
    resize:none;
    font-family: inherit
  }
 .not-editable {

 }
 .nickname{
 }
 .editable-textarea {
   border: 1px solid #dcdfe6;
   border-radius: 4px;
   padding: 10px;
   line-height: 1.5;
   min-height: 180px;
   max-height: 20em; /* 设置默认行宽为4行 */
   outline: none;
   white-space: pre-line;
   word-wrap: break-word;
   /*word-break:keep-all;|*/
   resize: both;
   overflow: auto;
 }

 .editable-textarea:focus {
   border-color: #409EFF;
 }
</style>
